<!-- 新建/编辑供应商信息模板 -->
<template>
  <div class="index">
    <pageHeader :title="title" :bread-crumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button html-type="submit" type="primary" @click="save">{{
          id ? '保存' : '添加'
        }}</a-button>
        <a-button @click="cancel">取消</a-button>
      </template>
    </pageHeader>
    <!------------------------------------------>
    <div class="content">
      <div class="title">基础设置</div>
      <a-form
        auto-label-width
        ref="demandTemplateRef"
        layout="vertical"
        :model="form"
      >
        <a-form-item field="te" label="供应商录入模板名称">
          <a-input
            v-model="form.list.tempName"
            placeholder="请输入供应商录入模板名称"
          />
        </a-form-item>
        <a-form-item
          field="tempDes"
          label="供应商录入模板说明"
          validate-trigger="input"
        >
          <a-textarea
            placeholder="请输入说明描述该供应商录入模板，100字符以内"
            :max-length="100"
            auto-size
            allow-clear
            show-word-limit
            v-model="form.list.tempDes"
          />
        </a-form-item>
        <a-form-item
          field="name"
          label="所属级别"
          required
          validate-trigger="input"
        >
          <a-select
            v-model="form.list.supLevel"
            placeholder="请选择新建采购类合同模板类型"
            ref="levelRef"
            @change="selectLevel"
          >
            <a-option
              v-model="form.list.supLevel"
              v-for="(item, index) in levelList.list"
              :value="item.id"
              :key="index"
              >{{ item.name }}</a-option
            >
          </a-select>
        </a-form-item>

        <!------------------------------------------>
        <a-form-item field="name" label="图标" validate-trigger="input">
          <icon-book size="24" @click="iconClick" />
        </a-form-item>
        <!-- <a-form-item
          class="end-line"
          field="name"
          label="启用状态"
          validate-trigger="blur"
        >
          <a-switch
            v-model="form.list.state"
            :checked-value="1"
            :unchecked-value="2"
          >
            <template #checked> 开 </template>
            <template #unchecked> 关 </template>
          </a-switch>
        </a-form-item> -->
        <!------------------------------------------>
        <div class="title">录入表单设置</div>
        <a-form-item
          field="name"
          label="表单设置"
          validate-trigger="blur"
          required
        >
          <!------------------------------------------>
          <a-input
            ref="inputRef"
            v-model="form.list.design.name"
            placeholder="请选择"
            message="此项必填"
            readonly
            @click="formClick"
          />
        </a-form-item>
        <!-- <a-form-item
          field="name"
          label="审批流程设置"
          validate-trigger="blur"
          required
        >
          <a-radio-group v-model="radioValue">
            <a-radio value="1">指定审批人员</a-radio>
            <a-radio value="2">审批流程</a-radio>
          </a-radio-group>
          <div v-show="radioValue == 1">指定审批人员</div>
          <div v-show="radioValue == 2">审批流程</div>
        </a-form-item> -->
      </a-form>
    </div>
    <!---------------------------------------------------------------------------------------------------->
    <!---------------------------------------------------------------------------------------------------->
    <!---------------------------------------------------------------------------------------------------->
    <!-- 图标选择弹框 -->
    <a-modal
      v-model:visible="iconModalVisible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <template #title> 图标列表 </template>
      <div>选择图标：</div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    nextTick,
    onMounted,
    computed,
    watchEffect,
    onUnmounted,
  } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useBuyStore } from '@/store';
  import { Message } from '@arco-design/web-vue';
  import uniqueid from 'lodash.uniqueid';
  import { number } from 'echarts';
  import dayjs from 'dayjs';
  import {
    GetSupplierTemplateDetailInfo,
    GetSupplierLevelInfo,
    PostSupplierTemplateInfo,
  } from '@/api/buy-management/supplier-management/base-setting';

  const active = ref(false);
  const router = useRouter();
  const route = useRoute();
  const store = useBuyStore();

  let id = ref(route.query.id); // 模板id
  const inputRef = ref();
  const breadCrumb: string[] = [
    '采购管理',
    '基础设置',
    '供应商信息模板',
    '新建供应商录入模板',
  ];
  let title = '新建供应商录入模板';

  if (id.value) {
    breadCrumb[3] = '编辑供应商录入模板';
    title = '编辑供应商录入模板';
  }

  const form: any = reactive({
    list: {
      createUserId: undefined,
      tempName: '', // 模板名称
      supLevel: undefined, // 供应商等级
      state: 2, // 模板状态，默认传2不开启
      tempDes: '', // 模板说明
      logo: '',
      design: {
        name: '', //
        form: [],
      },
    },
  });
  let currLevelName = ''; // 储存当前级别的名称

  let levelRef = ref(); // 储存所属级别的ref

  // *所属类型 选择下拉框
  const supplierList = reactive<any>({
    list: [],
  });

  // 获取详情数据
  const getDataDetail = async () => {
    try {
      const res = await GetSupplierTemplateDetailInfo({ id: id.value });
      form.list = res;
      currLevelName = res.supName;
    } catch (err: unknown) {
      console.log(err);
    }
  };

  onMounted(() => {
    if (store.currSupplierForm.form) {
      store.currSupplierForm.form.forEach((item: any) => {
        item.required = item.required === true ? 1 : 2;
      });
      form.list.design = store.currSupplierForm;
    }
    if (id.value) getDataDetail();
  });

  const levelList = reactive<any>({
    list: [],
  });

  // 获取级别数据
  const getLevelData = async () => {
    try {
      const { data } = await GetSupplierLevelInfo();
      levelList.list = data;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getLevelData();

  // 选择级别触发的事件
  const selectLevel = async (id: number) => {
    const res = levelList.list.find((item: any) => item.id === id);
    currLevelName = res.name;
  };

  // 点击跳转到表单编辑页面
  const formClick = () => {
    // 判断是编辑还是新增
    if (id.value) {
      router.push({
        name: 'TemplateFormSupplier',
        query: {
          id: id.value,
          levelName: currLevelName,
        },
      });
    } else {
      route.meta.ignoreCache = false;
      store.currSupplierForm = {};
      router.push({
        name: 'TemplateFormSupplier',
        query: {
          levelName: currLevelName,
        },
      });
    }
  };

  const save = async () => {
    try {
      await PostSupplierTemplateInfo(form.list);
      router.back();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  onUnmounted(() => {
    store.currSupplierForm = {};
  });
</script>

<script lang="ts">
  export default {
    name: 'TemplateSupplierAdd',
  };
</script>

<style scoped lang="less">
  .index {
    display: flex;
    flex-direction: column;
    height: 100%;
    .content {
      // height: 400px;
      flex: 1;
      overflow-y: auto;
      margin: 16px;
      padding: 16px;
      border: 1px solid #eee;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
      border-radius: 5px;

      .title {
        font-size: 16px;
        margin-bottom: 10px;
      }

      .end-line {
        padding-bottom: 16px;
        border-bottom: 15px solid #eee;
      }

      .set-print-model {
        margin-left: 16px;
        cursor: pointer;
        color: #409eff;
      }

      .line-box {
        display: flex;
      }
    }
  }

  .form-modal {
    display: flex;
    flex-direction: column;
    height: 100%;

    .tips {
      border-radius: 5px;
      background: rgba(230, 247, 255, 1);
      padding: 5px 10px;
      margin-bottom: 16px;
      font-size: 16px;
    }

    .meta {
      display: flex;
      justify-content: space-between;
      margin: 16px 0;
      font-size: 16px;
    }

    .form-list-content {
      flex: 1;
      overflow: auto;

      .form-list {
        border-bottom: 1px solid #eee;
        padding-bottom: 16px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .form-name {
          font-size: 16px;
        }

        .form-info {
          font-size: 12px;
          color: #666;

          span {
            margin-right: 16px;
          }
        }
      }
    }
  }
</style>
